<template>
  <div class="home items-center min-h-full py-6">
    <h1 class="font-bold text-center text-2xl">Main-Home</h1>
    <Typography>
      <Typography.Title :level="3">路由</Typography.Title>
      <Typography.Title :level="4">router命令式跳转</Typography.Title>
      <blockquote> 范围在主应用内进行跳转，因为基座与子应用的router实例不互通 </blockquote>
      <a-button @click="goAbout">跳转到main-about</a-button>
    </Typography>
  </div>
</template>

<script setup>
  import { Typography } from 'ant-design-vue';
  function goAbout() {
    // 在主应用中进行跳转，且当前还并未加载子应用的，pushState跳转正常，不会出现在/micro-app-vue3路由页面跳转到about时出现的问题
    window.history.pushState(null, null, '/about');
    window.dispatchEvent(new PopStateEvent('popstate', { state: null }));
  }
</script>
